<template>
    <view class="page">
        <view class="page-form-list">
            <view class="page-form-head">
                <img v-if="img_Info.url==''" :src="File_Url+'upload-img.png'" @click="changeAvatar"/>
                <img v-if="img_Info.url!=''" :src="img_Info.url" @click="changeAvatar"/>
                <text>上传头像</text>
            </view>
            <view class="page-form-item">
                <text>真实姓名</text>
                <input type="text" placeholder="请输入您的真实姓名" v-model="realname"/>
            </view>
            <view class="page-form-item">
                <text>所在单位</text>
                <input type="text" placeholder="请输入您的单位名称" v-model="unit_name"/>
            </view>
            <view class="page-form-item">
                <text>职称</text>
                <input type="text" placeholder="请输入您的职称" v-model="position" />
            </view>
            <view class="page-form-place">
                <view class="form-place-top">
                    <text>您所在地区</text>
                    <picker class="item-picker" mode="region" :value="region" :custom-item="customItem" @change="regionChange">
<!--                        <text>{{region[0]}},{{region[1]}},{{region[2]}}</text>-->
<!--                        <text>{{region[2]=='全部'?(region[1]=='全部'?region[0]:region[1]):region[2]}}</text>-->
                        <text v-if="region.length>0 && region[0] != '全部'">{{region[2]=='全部'?(region[1]=='全部'?region[0]:region[1]):region[2]}}</text>
                        <text v-if="region.length == 0 || region[0] == '全部'">请选择</text>
                        <img :src="File_Url+'right-grey.png'" />
                    </picker>
                </view>
                <!-- <view class="form-palce-bottom">
                    <input placeholder="请输入详细地址" />
                </view> -->
            </view>
        </view>
        <view class="page-form-list">
            <view class="page-form-range">
                <view class="range-title">
                    <view class="content-left">
                        <text>业务范围</text>
                        <input type="text" placeholder="单个标签最多4个字" v-model="rangeWords"/>
                    </view>
                    <view class="content-right" @click="addRangeList">
                        <img :src="File_Url+'tip-add.png'" />
                    </view>
                </view>
                <view class="range-content">
                    <view class="item" v-for="(item ,index) in labels" :key="index">
                        <text>{{item}}</text>
                        <img :src="File_Url+'delete-grey.png'" @click="delRange(index)"/>
                    </view>
                </view>
            </view>
            <view class="page-form-desc">
                <view class="desc-title">擅长领域</view>
                <view class="desc-text">
                    <textarea auto-height="true" placeholder="请详细描述一下您所擅长的领域" v-model="strengths"></textarea>
                </view>
            </view>
        </view>
        <view class="page-form-list">
            <view class="page-form-certificate">
                <view class="certificate-head">
                    <view class="title">资质证明（图片形式）</view>
                </view>
                <view class="certificate-content" @click="QualificationsUpload">
                    <img v-if="qualification_url.length>0" :src="qualification_url[0]" mode="widthFix" />
                    <view class="btn"  v-if="qualification_url.length==0">
                        <img :src="File_Url+'add-a.png'" />
                        <text>上传资质证明</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="page-btn">
            <button @click="submitExpertAuth">提交认证申请</button>
        </view>
    </view>
</template>

<script>
    export default {
        name: "expertAuth",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                region: ['广东省', '广州市', '天河区'],
                customItem: '全部',
                rangeWords:'',
                img_Info:{
                    url: '',
                    id:''
                },
                realname: '',
                unit_name: '',
                position: '',
                strengths: '',
                labels: [],
                qualification_url:[],
                qualification_imgs: [],
            }
        },
        methods: {
			async getExpertAuthInfo(){
				let res=await this.$api.getExpertAuthInfo({user_token:uni.getStorageSync('userToken')});
				if(res.data.level=='success'){
					if(res.data.data){
						let data=res.data.data;
						this.img_Info={
							url:data.photo_url,
							id:data.photo_id
						}
						this.realname=data.realname;
						this.unit_name=data.unit_name;
						this.position=data.position;
						this.region[0]=data.province;
						this.region[1]=data.city;
						this.region[2]=data.area;
						this.labels=data.expert_label;
						this.strengths=data.strengths;
						this.qualification_url=[data.expert_qualification_img[0].img_url]
						this.qualification_imgs=[data.expert_qualification_img[0].img_id]
					}
				}
			},
            //上传真人头像
            async changeAvatar(){
                let res=await this.$currency.upLoadImage(this,'file/upload-img')
                let data=JSON.parse(res.data)
                if(data.level!='success'){
                    uni.showToast({
                        title:data.message,
                        icon:'none'
                    })
                }else {
                    this.img_Info={
                        url:data.data.img_url,
                        id:data.data.id
                    }
                }
            },
            //上传资质证明
            async QualificationsUpload(){
                var _this = this;
                uni.chooseImage({
                    sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
                    sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
                    count: 9,
                    success: res => {
                        _this.qualification_url= _this.qualification_url.concat(res.tempFilePaths)
                        // 限制最多只能留下3张照片
                        // this.uploadImg(res.tempFilePaths);
                        for (let i = 0; i < res.tempFilePaths.length; i++){
                            uni.showLoading({
                                title: '上传中'
                            })
                            uni.uploadFile({
                                url: _this.$api.BASE_URL+'file/upload-img',
                                filePath: res.tempFilePaths[i],
                                name: 'photo',
                                header: {
                                    'content-type': 'application/json' // 默认值
                                },
                                success: function (res) {
                                    res.data = JSON.parse(res.data);
                                    if (res.data.level == 'success') {
                                        _this.qualification_imgs.push(res.data.data.id)
                                    }else {
                                        uni.showToast({
                                            icon:'none',
                                            title:res.data.message
                                        })
                                    }
                                    uni.hideLoading();
                                }
                            })
                        }
                        // $digest(this)
                    }
                })
            },
            //专家认证申请
            async submitExpertAuth(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    realname: this.realname,
                    photo_id: this.img_Info.id,
                    unit_name: this.unit_name,
                    position: this.position,
                    province: this.region[0],
                    city: this.region[1],
                    area: this.region[2],
                    strengths: this.strengths,
                    labels: this.labels,
                    qualification_imgs: this.qualification_imgs
                }
                const res = await this.$api.submitExpertAuth(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 1500
                    })
                    this.getTemplate();
                    // setTimeout(function () {
                    //     uni.navigateBack({
                    //         delta: 1
                    //     })
                    // },1500)
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message,
                        duration: 1500
                    })
                }
            },
            //获取订阅消息模板id
            async getTemplate(){
                const res = await this.$api.getTemplate({type: 'personal_auth'});
                if (res.data.level == 'success'){
                    wx.requestSubscribeMessage({
                        tmplIds: res.data.data,
                        success(res){
                            console.log(res);
                        },
                        complete(res){
                            setTimeout(function () {
                                uni.navigateBack({
                                    delta: 1
                                })
                            },1500)
                        }
                    })
                }
            },
            //添加标签
            addRangeList(){
                if (this.labels.length==0){
                    this.labels.push(this.rangeWords);
                }else {
                    if (!this.labels.includes(this.rangeWords)) {
                        this.labels.push(this.rangeWords);
                    }
                }
                this.rangeWords = '';
            },
            //删除标签
            delRange(id){
                this.labels.splice(id,1);
            },
            regionChange(e){
                console.log(e)
                this.region = e.detail.value;
            },
        },
		onLoad() {
			this.getExpertAuthInfo()
		}
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: 100vh;
        @include flex(flex-start);
        flex-direction: column;
    }
    .page-form-list{
        background: #FFFFFF;
        width: 100vw;
        margin-bottom: 20rpx;
        .page-form-head{
            border-bottom: 1rpx solid #E5E5E5;
            @include flex();
            flex-direction: column;
            padding: 30rpx 0;
            img{
                width: 184rpx;
                height: 184rpx;
                border-radius: 360rpx;
            }
            text{
                padding-top: 10rpx;
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
                color: #999999;
            }
        }
        .page-form-item{
            padding: 38rpx 30rpx;
            width: calc(100% - 60rpx);
            border-bottom: 1rpx solid #E5E5E5;
            @include flex(flex-start);
            flex-direction: row;
            text{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
            }
            input{
                margin-left: auto;
                height: 45rpx;
                line-height: 45rpx;
                max-width: 70%;
                text-align: right;
            }
        }
        .page-form-place{
            padding: 38rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            width: calc(100% - 60rpx);
            .form-place-top{
                @include flex(flex-start);
                flex-direction: row;
                padding-bottom: 24rpx;
                text{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
                .item-picker{
                    margin-left: auto;
                    @include flex(flex-end);
                    flex-direction: row;
                    text{
                        font-size: 32rpx;
                        line-height: 45rpx;
                        height: 45rpx;
                        color: #999999;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }
            .form-palce-bottom{
                input{
                    width: 100%;
                    height: 45rpx;
                    line-height: 45rpx;
                }
            }
        }
        .page-form-desc{
            padding: 30rpx;
            .desc-title{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
                padding-bottom: 24rpx;
            }
            .desc-text{
                width: 100%;
                textarea{
                    min-height: 90rpx;
                    width: 100%;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
            }
        }
        .page-form-range{
            border-bottom: 1rpx solid #E5E5E5;
            padding: 30rpx;
            .range-title{
                @include flex(flex-start);
                flex-direction: row;
                padding-bottom: 24rpx;
                .content-left{
                    @include flex(flex-start);
                    flex-direction: row;
                    width: calc(100% - 60rpx);
                    text{
                        height: 45rpx;
                        line-height: 45rpx;
                        font-size: 32rpx;
                        margin-right: 20rpx;
                    }
                    input{
                        margin-left: auto;
                        height: 45rpx;
                        line-height: 45rpx;
                        font-size: 32rpx;
                        text-align: right;
                    }
                }
                .content-right{
                    margin-left: auto;
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            .range-content{
                @include flex(flex-start);
                flex-direction: row;
                .item{
                    height: 40rpx;
                    padding: 0;
                    background: #3782FF;
                    border-radius: 8rpx;
                    margin-right: 10rpx;
                    @include flex(flex-start);
                    flex-direction: row;
                    text{
                        height: 30rpx;
                        line-height: 30rpx;
                        color: #FFFFFF;
                        font-size: 28rpx;
                        padding: 0 10rpx 0 20rpx;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }
        }
        .page-form-certificate{
            padding: 24rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            .certificate-head{
                padding: 14rpx 0;
                @include flex(flex-start);
                flex-direction: row;
                .title{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
                .example{
                    margin-left: auto;
                    font-size: 32rpx;
                    height: 45rpx;
                    line-height: 45rpx;
                    color: #0A5FEC;
                }
            }
            .certificate-content{
                border: 1rpx dashed #0A5FEC;
                border-radius: 8rpx;
                @include flex();
                flex-direction: column;
                overflow: hidden;
                .btn{
                    padding: 72rpx 0;
                    @include flex();
                    flex-direction: column;
                    img{
                        width: 124rpx;
                        height: 124rpx;
                        margin-bottom: 20rpx;
                    }
                    text{
                        color: #666666;
                        font-size: 32rpx;
                        height: 45rpx;
                        line-height: 45rpx;
                    }
                }

            }
        }
    }
    .page-btn{
        margin-top: auto;
        padding: 60rpx 30rpx;
        width: calc(100vw - 60rpx);
        button{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            color: #FFFFFF;
            font-size: 34rpx;
            background: #3782FF;
            border-radius: 44rpx;
        }
    }
</style>
